<template>
  <div class="login_container">
    <div class="login_box" v-if="type == 1">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../../assets/logo1.png" alt/>
      </div>
      <!-- 登陆表单区域 -->
      <el-form
          ref="loginFormRef"
          label-width="0px"
          class="login_in"
          :model="loginForm"
          :rules="loginFormRules"
      >
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
              v-model="loginForm.password"
              prefix-icon="iconfont icon-3702mima"
              type="password"
          ></el-input>
        </el-form-item>
        <el-form-item prop="secreSecurityAnswer" class="toggle">
          <el-button type="primary" @click="toggle">去注册</el-button>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="_login">登录</el-button>
          <el-button type="success" @click="passwordRecoveryDialog = true">找回密码</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="register_box" v-else>
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../../assets/logo1.png" alt/>
      </div>
      <!-- 登陆表单区域 -->
      <el-form
          ref="registerForm"
          label-width="0px"
          class="register "
          :model="registerForm"
          :rules="loginFormRules"
      >
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input v-model="registerForm.username" prefix-icon="iconfont icon-user"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
              v-model="registerForm.password"
              prefix-icon="iconfont icon-3702mima"
              type="password"
          ></el-input>
        </el-form-item>
        <el-form-item prop="secreSecurity">
          <el-input
              v-model="registerForm.secreSecurity"
              prefix-icon="iconfont icon-3702mima"

          ></el-input>
        </el-form-item>
        <el-form-item prop="secreSecurityAnswer">
          <el-input
              v-model="registerForm.secreSecurityAnswer"
              prefix-icon="iconfont icon-3702mima"
              type="password"
          ></el-input>
        </el-form-item>
        <el-form-item prop="secreSecurityAnswer" class="toggle">
          <el-button type="primary" @click="toggle">去登录</el-button>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="_register">注册</el-button>
          <el-button type="info" @click="resetRegisterForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 密码找回对话框 -->
    <PasswordRecovery :dialogVisible.sync="passwordRecoveryDialog"/>
    <!-- 密码找回对话框 end -->
  </div>
</template>
<script>
import {login, register, getUserInfo} from '../../api/user.js'
import {setToken} from '@/utils/auth.js'
import PasswordRecovery from "./PasswordRecovery/PasswordRecovery";

export default {
  data() {
    return {
      //这是登陆表单的数据绑定对象
      loginForm: {
        username: 'test1',
        password: 'test1'
      },
      registerForm: {
        username: 'test2',
        password: 'test2',
        secreSecurity: 'test2',
        secreSecurityAnswer: 'test2',
      },
      //这是表单的验证规则对象
      loginFormRules: {
        //验证用户名是否合法
        username: [
          {required: true, message: '请输入登录名称', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ],
        //验证密码是否合法
        password: [
          {required: true, message: '请输入登录密码', trigger: 'blur'},
          {min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'}
        ]
      },
      //1是登录界面，0是注册界面
      type: 1,

      passwordRecoveryDialog: false // 找回密码dialog
    }
  },
  components: {PasswordRecovery},
  methods: {
    //点击重置按钮，重置登录表单

    async _register() {
      let usernama = this.registerForm.username
      let password = this.registerForm.password
      let secreSecurity = this.registerForm.secreSecurity
      let secreSecurityAnswer = this.registerForm.secreSecurityAnswer
      await register(usernama, password, secreSecurity, secreSecurityAnswer).then((res) => {
       
        if(res.errno == 0) {
          this.type=1
          this.loginForm.username = this.registerForm.username
          this.loginForm.password = this.registerForm.password
          
         return  this.$message.info("注册成功快去登录吧");
        }else {
          return  this.$message.info("你输入的账号已经注册过快去登录吧");

        }
        

      })
    },
    async _login() {
      let usernama = this.loginForm.username
      let password = this.loginForm.password
     

      let result = await login(usernama, password);
      if (result.errno === 0) {
        // token设置在cookie中了
        setToken(result.data.token);
        // token经过对axios的二次封装自动携带在header中
        let result2 = await getUserInfo();
        if (result2.errno === 0) {
          
          // 获取用户信息成功，准备跳转
          this.$store.state.currUserId = result2.data.userInfo.id; // 设置用户id
          if (this.$route.query.redirectTo) { // 检查是否需要重定向到某个页面
            const {redirectTo, whiteboard_id, state} = this.$route.query
            this.$router.push(`/${redirectTo}/${whiteboard_id}/${state}`);
          } else {
            this.$router.push('/palatteList') // 跳转
          }
        }
      } else {
        this.$message({
          type: 'error',
          message: '账号或密码错误'
        })
      }
    },
    //切换注册于登录的开关
    toggle() {
      this.type = !this.type

    },
    //重置表单
    resetLoginForm() {
      this.loginForm.username = ''
      this.loginForm.password = ''
    },
    resetRegisterForm() {
      this.registerForm.username = ''
      this.registerForm.password = ''
      this.registerForm.secreSecurity = ''
      this.registerForm.secreSecurityAnswer = ''
    },

  }
}
</script>
<style lang="less" scoped>
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}

.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0, 0, 10px, #ddd;
    position: absolute;
    left: 50%;
    top: -10%;
    transform: translate(-50%, -50%);
    background-color: #fff;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}

.register_box {
  width: 450px;
  height: 450px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0, 0, 10px, #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}


.btns {
  display: flex;
  justify-content: flex-end;
}

.toggle {
  display: flex;
  justify-content: flex-start;
}

.login_in {
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.register {

  position: absolute;
  bottom: 0px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;

}
</style>